<template>
  <div>
    <el-card>
      <!-- 主体区 -->
      <el-form
        label-width="100px"
        :model="edit_form"
        :rules="edit_rules"
        ref="edit_ref"
      >
        <el-form-item label="站点名称" prop="name">
          <el-input
            placeholder="请输入站点名称"
            maxlength="20"
            clearable
            show-word-limit
            v-model="edit_form.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="logo图片" prop="image_id">
          <s-file-image
            :image_list="image_list1"
            @confirm_imsge="confirm_imsge"
          ></s-file-image>
        </el-form-item>
        <el-form-item label="公众号logo" prop="gzh_id">
          <s-file-image
            :image_list="image_list2"
            @confirm_imsge="gzh_imsge"
          ></s-file-image>
        </el-form-item>
        <el-form-item label="小程序logo" prop="gzh_id">
          <s-file-image
            :image_list="image_list3"
            @confirm_imsge="xcx_imsge"
          ></s-file-image>
        </el-form-item>
        <el-form-item label="图片储存" prop="image_status">
          <el-radio-group v-model="edit_form.image_status" size="medium">
            <el-radio border :label="1">本地</el-radio>
            <el-radio border :label="2">七牛云</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关于我们" prop="about_us">
          <s-editor
            :content="edit_form.about_us"
            @confirm_content="confirm_content"
          ></s-editor>
        </el-form-item>
      </el-form>

      <!-- 按钮区 -->
      <el-button
        class="send_btn"
        :disabled="btnStatus.update"
        type="primary"
        @click="update()"
        >确 定</el-button
      >
    </el-card>
  </div>
</template>
<script>
import sFileImage from "@/components/s-file-image/s-file-image.vue";
import sEditor from "@/components/s-editor/s-editor.vue";
// import axios from "axios";
export default {
  components: {
    "s-file-image": sFileImage,
    "s-editor": sEditor
  },
  data() {
    return {
      btnStatus: this.is_string(
        {
          update: "auth/auth_config/update"
        },
        this
      ),
      edit_form: {
        id: "",
        name: "",
        image_status: 1,
        image_url: "",
        image_id: "",
        gzh_url: "",
        gzh_id: "",
        xcx_url: "",
        xcx_id: "",
        about_us: ""
      },
      image_list1: [],
      image_list2: [],
      image_list3: [],
      edit_rules: {
        name: [
          { required: true, message: "请输入名称！", trigger: "blur" },
          { min: 2, max: 20, message: "名称长度在2到20个字符", trigger: "blur" }
        ],
        image_status: [
          { required: true, message: "请选择图片储存方式！", trigger: "blur" }
        ],
        image_id: [
          { required: true, message: "请选择logo图片！", trigger: "blur" }
        ],
        gzh_id: [
          { required: true, message: "请选择公众号logo！", trigger: "blur" }
        ],
        xcx_id: [
          { required: true, message: "请选择小程序logo！", trigger: "blur" }
        ],
        about_us: [
          { required: true, message: "请输入关于我们！", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.get_info();
  },
  methods: {
    confirm_content(res) {
      console.log(res);
      this.edit_form.about_us = res;
    },
    // 图片上传回调
    confirm_imsge(res) {
      this.edit_form.image_id = res[0].id;
    },
    // 图片上传回调
    gzh_imsge(res) {
      this.edit_form.gzh_id = res[0].id;
    },
    // 图片上传回调
    xcx_imsge(res) {
      this.edit_form.xcx_id = res[0].id;
    },
    // 获取信息
    get_info() {
      this.$base.request(
        {
          that: this,
          url: "auth/auth_config/index"
        },
        res => {
          if (res.code === 8888) {
            this.edit_form = res.data;
            this.image_list1 = [
              {
                id: res.data.image_id,
                url: res.data.image_url
              }
            ];
            this.image_list2 = [
              {
                id: res.data.gzh_id,
                url: res.data.gzh_url
              }
            ];
            this.image_list3 = [
              {
                id: res.data.xcx_id,
                url: res.data.xcx_url
              }
            ];
          }
        }
      );
    },
    // 确定
    update() {
      this.$refs.edit_ref.validate(valid => {
        if (valid) {
          this.$base.request(
            {
              that: this,
              method: "PUT",
              url: "auth/auth_config/update",
              data: this.edit_form
            },
            res => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg });
              }
            }
          );
        }
      });
    }
  }
};
</script>
